<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="./js/d3.v3.min.js"></script>
	<style type="text/css">
		svg{border: 1px solid #333;}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			//添加svg画布
			var svg=d3.select("body").append("svg")
						.attr("width",600)
						.attr("height",400)
			//定义距离
			var margin={left:30,right:30,top:30,bottom:30}

			//定义数据
			var arr=[100,120,90,60]
			var H= 400-margin.top-margin.bottom


			//定义线性比例尺
			var yScale=d3.scale.linear()
						.domain([0,d3.max(arr)])
						.range([0,H])

			//定义序数比例尺	
			var xScale=d3.scale.ordinal()
						.domain(["北京","上海","广州","深圳"])
						.rangeRoundBands([0,600-30-30])
			var x=xScale("广州")
			console.log(x)



			var xScale=d3.scale.ordinal()
						.domain(arr.map((item,index)=>index))		//[0,1,2,3]
						.rangeRoundBands([0,600])

			//添加分组，并移动分组
			var group=svg.append("g")
				.attr("transform",`translate(${margin.left},${margin.top})`)

			//竖直柱状图
			group.selectAll("rect").data(arr).enter()
					.append("rect")
					.attr("x",(item,index)=>{
						// return index*70
						return xScale(index)
		
					})
					.attr("y",(item,index)=>{
						return H-yScale(item)
					})
					.attr("width",50)
					.attr("height",(item)=>{
						return yScale(item)
					})
					.attr("fill","steelblue")



		}
	</script>
</head>
<body>

</body>
</html>